window.addEventListener('load', function () {
    // window.addEventListener('load', function () 当页面全部加载完后再显示
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');//遮挡层
    var big = document.querySelector('.big');//大盒子
    // 模块1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 模块2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // (1). 先计算出鼠标在盒子内的坐标（鼠标在页面中的坐标-盒子距离左侧的距离）
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了（主要是实现让鼠标位于盒子的最中央）
        // (3) 我们mask 移动的距离
        // x - mask.offsetWidth / 2 是让鼠标位于盒子的最中央
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离=小图片盒子的宽度-遮挡层盒子宽度
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;//因为盒子是正方形 所以长和宽都可以用maskMax来控制
        if (maskX <= 0) {
            maskX = 0;//当左侧的宽度为0或小于0 直接停下 卡住
        } else if (maskX >= maskMax) {
            maskX = maskMax;//右侧距离控制
        }
        // 如果y 坐标小于了0 就让他停在0 的位置
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 模块3. 移动黄色遮挡层时，大图片一起跟随移动
        //大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离=图片的宽度-盒子的宽度（网页中设置这里的盒子宽度比图片小）
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        //这里的大图片不要忘记给大图片加定位 要不然放大镜中的大图还是不动的
        //大图应该与图片是反方向走的 所以这里是负值
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })

})